<template>
  <div class="c-bg-white">
    <div class="fixTop c-bd-b12-f5">
      <new-search-bar
        ref="searchBar"
        :placeholder="'请输入关键词'"
        @search='startSearch'
        @cancel='cancelSearch'
      ></new-search-bar>
    </div>
    <template v-if="isShowCon">
      <div class="c-pt80">
        <!-- 主题 -->
        <div
          class="c-w100 c-ph24 c-pt30"
          v-if="hotThemeList.length > 0"
        >
          <div class="c-flex-row c-pt10">
            <span class="c-fs24 c-fc-xblack c-p c-pl12 borderL">热门主题</span>
          </div>
          <!-- 数据 -->
          <div
            class="c-flex-column c-pv24 c-bd-b1"
            v-for="(item, index) in hotThemeList"
            :key="index"
            @click="handleClickRouteTheme(item)"
          >
            <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
              <i class="iconfont theme-fc c-pr8">&#xe6fd;</i>{{item.themeName}}
            </div>
            <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
              <div>
                <span>{{item.joinMemberCount | formatTenThousand}}人加入</span> |
                <span>{{item.feedCount | formatTenThousand}}条动态</span>
              </div>
              <div
                class="c-fs20 theme-fc"
                v-if="item.joinType == 1"
              >免费</div>
              <div
                class="c-fs20 theme-fc"
                v-if="item.joinType == 2"
              >
                <span class="c-lh">{{'￥' | iosPriceFilter}}{{item.price}}</span>
              </div>
            </div>
          </div>
        </div>
        <loading-status-tem
          class="notext"
          :noData="searchText.length==0 && hotThemeList.length == 0"
          :noDataText="'输入关键词，查找想要的内容'"
          :imgWidth="'c-ww180'"
          noneImage="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/nosearch.png"
        ></loading-status-tem>
      </div>
    </template>
    <!-- tab -->
    <template v-if="!isShowCon">
      <div class="c-pf c-p-t160 c-maxw640 c-bd-b1 c-pz100 c-mt-1 c-w100">
        <my-small-tabbar
          id="tabhBar"
          :tabList="tabList"
          :tabIndex="typeBar"
          @changeTab="changeType"
          class="c-bg-white"
        ></my-small-tabbar>
      </div>
      <div class="c-pt168">
        <circle-search-tab
          :typeBar="typeBar"
          :getTabList="getTabList"
          :dataStatus="dataStatus"
          :searchText="searchText"
          :enableQuestion="enableQuestion"
          @getFeedsDetail="getFeedsDetail"
          @handleClickCircleIndex="handleClickCircleIndex"
          @handleClickThemeRoute="handleClickThemeRoute"
        ></circle-search-tab>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import circleSearchTab from "@/components/homePage/circle/circleSearchTab.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
const LIMIT = 10;
let page = 1;
export default {
  name: "CircleSearch",
  components: {
    newSearchBar,
    MySmallTabbar,
    circleSearchTab,
    loadingStatusTem
  },
  data() {
    return {
      circleId: "",
      dataStatus: 'HAS_MORE_DATA',
      tabList: [{
        title: '动态',
        index: 1
      }, {
        title: '圈友',
        index: 2
      }, {
        title: '主题',
        index: 3
      }],
      typeBar: 1,
      hotThemeList: [],
      isShowCon: true,
      getTabList: [],
      searchText: "",
      enableQuestion: -1,
    }
  },
  activated() {
    setDocumentTitle("搜索");
    this.circleId = this.$route.query.circleId || "";
    this.enableQuestion = this.$route.query.enableQuestion || -1;
    this.typeBar = 1;
    this.hotThemeList = [];
    this.isShowCon = true;
    this.getTabList = [];
    this.searchText = "";
    this.getHotTheme();
    window.addEventListener('scroll', this.windowScrollFunction);
    if (!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      setTimeout(() => {
        this.$refs.searchBar.searchClick();
      }, 100);
    }
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    getFeedsDetail(item) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleDetail",
        query: {
          circleFeedsId: item.circleFeedsId,
        }
      })
    },
    handleClickCircleIndex(item) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleIndex",
        query: {
          circleId: this.circleId,
          circleMemberId: item.circleMemberId
        }
      })
    },
    handleClickThemeRoute(item) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleTheme",
        query: {
          themeId: item.themeId
        }
      })
    },
    startSearch(e) {
      page = 1;
      this.isShowCon = false;
      this.searchText = e.searchValue;
      this.getTabList = [];
      this.getList();
    },
    cancelSearch(e) {
      page = 1;
      this.searchText = e.searchValue;
      this.typeBar = 1;
      this.getTabList = [];
      this.isShowCon = true;
    },
    changeType(type) {
      if (this.typeBar == type) {
        return;
      }
      this.typeBar = type;
      page = 1;
      this.getTabList = [];
      this.getList();
    },
    handleClickRouteTheme(item) {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleTheme",
        query: {
          themeId: item.themeId
        }
      })
    },
    getHotTheme() {
      utilJs.getMethod(`${global.apiurl}circle/getHotTheme/${this.circleId}`, res => {
        this.hotThemeList = res;
      })
    },
    getList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}circle/getList/${this.circleId}?type=${this.typeBar}&keywords=${this.searchText}&page=${page}&limit=${LIMIT}`, res => {
        if (page == 1) {
          this.getTabList = res.data;
        } else {
          this.getTabList = [...this.getTabList, ...res.data];
        }
        if (res.total * 1 == this.getTabList.length) {
          this.dataStatus = res.total * 1 == 0 ? "NO_DATA" : "NO_MORE_DATA";
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          page++
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      })
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.getTabList.length > 0) {
          this.getList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
}
</script>

<style lang="less" scoped>
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}
.borderL:after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.c-mt-1 {
  margin-top: -1px;
}
</style>